<template>
  <div class="BatteryTaskManagement">
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="id"> </el-table-column>
      <el-table-column label="图标">
        <template slot-scope="scope">
          <div @click="click(scope.row)">
            <el-upload
              class="avatar-uploader"
              :http-request="upLoad"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :on-preview="handlePictureCardPreview"
              accept="image/png,image/jpg,image/jpeg"
              action
            >
              <img
                v-if="scope.row.icon"
                :src="scope.row.icon"
                class="avatar_img"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon img"></i>
            </el-upload>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="事件名称">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.evenName"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="电量奖励">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.reward"
            onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="IOS跳转页面">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.iosTo"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Android跳转页面">
        <template slot-scope="scope">
          <el-input
            v-model="scope.row.androidTo"
            placeholder="请输入内容"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="
              () => {
                statusChange(scope.row);
              }
            "
          >
          </el-switch>
          <el-button
            type="success"
            size="small"
            plain
            @click="upData(scope.row)"
            >更新</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { client } from "@/utils/oss.js";
import { ossToken } from "@/api/NotificationManagement";
import Pagination from "@/components/Pagination"; // 分页
import {
  electricElectricTaskList,
  electricElectricTaskEdit,
} from "@/api/operationManagement";
export default {
  components: { Pagination },
  data() {
    return {
      imageUrl: "",
      targetObj: "",
      tableData: [],
      dataObj: {},
      total: 0,
      page: 1,
      pageSize: 10,
    };
  },
  methods: {
    click(obj) {
      this.targetObj = obj;
    },
    handleAvatarSuccess(res, file) {
      //   console.log(URL.createObjectURL(file.raw));
      this.targetObj.icon = URL.createObjectURL(file.raw);
    },
    //覆盖默认的上传行为，自定义上传的实现
    async upLoad(file, obj) {
      console.log(obj);
      await ossToken({
        type: 0,
      }).then((res) => {
        if (res.code == 0) {
          this.dataObj = {
            accessKeyId: res.data.accessKey,
            accessKeySecret: res.data.accessSecret,
            securityToken: res.data.token,
            region: "oss-" + res.data.regionId,
            bucket: res.data.bucket,
          };
        }
      });
      const self = this;
      try {
        let fileNames =
          "/img/" +
          Math.round(new Date() / 1000) +
          "." +
          file.file.name.substring(file.file.name.lastIndexOf(".") + 1);
        this.targetObj.upIcon = fileNames;
        //fileNames上传文件的名称
        //file.file上传文件的内容
        let cli = client(this.dataObj);
        console.log(fileNames);
        console.log(file);
        let result = cli.multipartUpload(fileNames, file.file);
        self.$message({
          message: "上传成功",
          type: "success",
        });
      } catch (e) {
        self.$message.error("上传失败");
      }
    },
    handlePictureCardPreview(file, obj) {
      console.log(obj);
      this.dialogImageUrl = file.url;
      this.dialogImageUrlB = file.url;
    },
    getList() {
      electricElectricTaskList({
        page: this.page,
        pageSize: this.pageSize,
      }).then((res) => {
        if (res.code == 0) {
          this.total = parseInt(res.data.count);
          this.tableData = res.data.list;
        }
      });
    },
    upData(obj) {
      electricElectricTaskEdit(obj).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    statusChange(obj) {
      electricElectricTaskEdit(obj).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "更新成功",
            type: "success",
          });
          this.getList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
/deep/.el-table td,
/deep/.el-table th.is-leaf {
  border: none !important;
}
.img {
  width: 35px;
  height: 35px;
}
.avatar_img {
  border: 1px dashed #ccc;
  width: 40px;
  height: 40px;
}
</style>